<template>
    <custom-navbar title="常用语" :auto-back="true" left-icon-color="#303133" />
    <view class="w-[100%] h-[102rpx] flex items-center justify-between px-[24rpx] bg-#fff fixed">
        <view class="text-[30rpx] text-[#1d2129]">默认聊天框常用语</view>
        <up-switch v-model="isOpen" active-color="#1F50F2" size="20" />
    </view>
    <up-gap height="30rpx" />
    <view class="px-[24rpx] mt-[102rpx]">
        <u-radio-group v-model="phrases">
            <view v-for="(item, index) in phrasesList" :key="index"
                class="w-100% py-40rpx px-24rpx rounded-[20rpx] bg-#fff flex items-center mb-[24rpx]">
                <view>
                    <u-radio activeColor="#1F50F2" :label="item.label" :name="item.label"></u-radio>
                </view>
                <view class="flex flex-1 justify-end">
                    <view class="iconfont icon-bianji1 mr-40rpx" style="font-size: 36rpx;"></view>
                    <view class="iconfont icon-shanchu" style="font-size: 36rpx;"></view>
                </view>
            </view>
        </u-radio-group>
    </view>
    <view class="fixed bottom-0 h-178rpx w-[100%] bg-#fff shadow-[0px_0px_12px_0px_rgba(238,239,241,0.50)]">
        <view @click="addPhrases"
            class="mx-auto my-0 mt-[24rpx] h-82rpx w-[90%] rounded-[42rpx] bg-#1f50f2 text-center text-[30rpx] text-white font-medium leading-[82rpx]">
            新增常用语
        </view>
    </view>

    <u-popup customStyle="width:90%" :show="popupShow" :round="10" mode="center" @close="close" @open="open" :safeAreaInsetBottom="false">
        <view class="px-24rpx py-40rpx">
            <view class="text-center text-[#333] text-[30rpx] font-medium mb-36rpx">新增常用语</view>
            <u--textarea v-model="phrasesValue" placeholder="请输入你的常用语,方便与HR打招呼"></u--textarea>
            <view class="flex mt-40rpx">
                <view
                    @click="popupCancel"
                    class="mx-auto my-0 mt-[24rpx] h-82rpx w-[40%] rounded-[42rpx] bg-#f7f7f8 text-center text-[30rpx] text-[#1d2129] font-medium leading-[82rpx]">
                    取消
                </view>
                <view
                    @click="popupOk"
                    class="mx-auto my-0 mt-[24rpx] h-82rpx w-[40%] rounded-[42rpx] bg-#1f50f2 text-center text-[30rpx] text-white font-medium leading-[82rpx]">
                    确认
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script setup>
import { ref } from 'vue';

const isOpen = ref(false)
const phrases = ref('您好,您请说,有什么可以帮到你')
let phrasesList = reactive([
    {
        label: '您好,您请说',
        code: 1,
        checked: false
    },
    {
        label: '您好,您请说,有什么可以帮到你',
        code: 1,
        checked: true
    }
])

let popupShow = ref(false)
let phrasesValue = ref('')

const addPhrases = () =>{
    popupShow.value = true
}
const popupCancel = () =>{
    popupShow.value = false
}
const popupOk = () =>{
    popupShow.value = false
}
</script>